<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width,initial-scale=1,user-scalable=0" name="viewport">
    <title>优惠券类型</title>
    <link href="../../public/plugin/weui/weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/jquery-weui/css/jquery-weui.min.css" rel="stylesheet">
    <link href="../../public/plugin/vant/index.css" rel="stylesheet">
    <link href="../../public/css/iconfont.css?v=20210227" rel="stylesheet">
    <link href="../../public/css/common.css?v=2023051801" rel="stylesheet">
    <style>
        body {
            display: flex;
            flex-wrap: wrap;
        }
    </style>
</head>
<body>
<div id="app" v-cloak>
    <div>
        <van-tabs v-model="active">
            <van-tab :title="'未使用'+usableList.length" name="0">
                <div :class="couponType === '0'?'coupon-blue-gradient':couponType==='1'?'coupon-green-gradient':'coupon-red-gradient'"
                     class="coupon coupon-wave-left coupon-yellow"
                     v-for="item in usableList">
                    <div class="coupon-info coupon-hole coupon-info-right-dashed">
                        <div class="coupon-price"> &yen;{{item.discountAmount}}{{couponType === '2' ? '折' : '元'}}</div>
                        <div class="coupon-desc" v-show="couponType==='0'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='1'">
                            {{item.templateName}}满{{item.amountMeet}}元使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='2'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-expiry-date">有效期：{{getCouponDateRange(item)}}</div>
                    </div>
                    <div @click=" window.location.href ='../store/mall.html'" class="coupon-get coupon-get-already">
                        立即使用
                    </div>
                    <div class="coupon-state">未使用</div>
                </div>
            </van-tab>
            <van-tab :title="'已使用'+ usedList.length" name="1">
                <div class="coupon coupon-wave-left coupon-grey" v-for="item in usedList">
                    <div class="coupon-info coupon-hole coupon-info-right-dashed">
                        <div class="coupon-price"> &yen;{{item.discountAmount}}{{couponType === '2' ? '折' : '元'}}</div>
                        <div class="coupon-desc" v-show="couponType==='0'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='1'">
                            {{item.templateName}}满{{item.amountMeet}}元使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='2'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-expiry-date">有效期：{{getCouponDateRange(item)}}</div>
                    </div>
                    <div class="coupon-get coupon-get-already">已使用</div>
                    <div class="coupon-state">已使用</div>
                </div>
            </van-tab>
            <van-tab :title="'已过期'+expireList.length" name="2">
                <div class="coupon coupon-wave-left coupon-green" v-for="item in expireList">
                    <div class="coupon-info coupon-hole coupon-info-right-dashed">
                        <div class="coupon-price"> &yen;{{item.discountAmount}}{{couponType === '2' ? '折' : '元'}}</div>
                        <div class="coupon-desc" v-show="couponType==='0'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='1'">
                            {{item.templateName}}满{{item.amountMeet}}元使用
                        </div>
                        <div class="coupon-desc" v-show="couponType==='2'">
                            {{item.templateName}},可直接使用
                        </div>
                        <div class="coupon-expiry-date">有效期：{{getCouponDateRange(item)}}</div>
                    </div>
                    <div class="coupon-get coupon-get-already">已过期</div>
                    <div class="coupon-state">已过期</div>
                </div>
            </van-tab>
        </van-tabs>
    </div>
    <div @click="WXUtils.goHome()" class="home-btn">
        <img alt="" src="../../public/image/icon/home.svg">
    </div>
</div>
<script src="../../public/plugin/jquery/jquery.min.js" type="text/javascript"></script>
<script src="../../public/plugin/jquery-weui/js/jquery-weui.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vue/vue.min.js" type="text/javascript"></script>
<script src="../../public/plugin/vant/vant.min.js" type="text/javascript"></script>
<script src="../../public/plugin/moment/moment.min.js" type="text/javascript"></script>
<script src="../../public/js/common.js?v=20230517441" type="text/javascript"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            couponList: [],
            couponType: '',
            couponTypeName: '',
            memberId: '',
            usableList: [],
            usedList: [],
            expireList: [],
            active: '0'
        },
        computed: {},
        mounted: function () {
            let self = this;
            self.couponType = getUrlParam("couponType");
            self.couponTypeName = getUrlParam("couponTypeName");
            window.document.title = decodeURIComponent(decodeURIComponent(self.couponTypeName));
            self.memberId = getCookie(COOKIE_MEMBER_ID);
            if (!self.memberId) {
                MemberUtils.getMemberInfo().then(function (res) {
                    console.log("会员基础信息");
                    console.log(res);
                    if (res && res.code === 200) {
                        self.getCouponPacket();
                    }
                })
            } else {
                console.log("cookie读取会员ID");
                self.getCouponPacket();
            }
        },
        methods: {
            // 获取优惠券类型统计列表
            getCouponPacket: function () {
                let self = this;
                let params = {
                    memberId: self.memberId,
                    couponType: self.couponType
                }
                MemberUtils.getCouponPacket(params).then(function (res) {
                    console.log(res);
                    if (res && res.code === 200) {
                        self.usableList = res.data.usableList;
                        self.usedList = res.data.usedList;
                        self.expireList = res.data.expireList;
                    }
                })
            },
            getCouponDateRange: function (item) {
                return item.startDate.substring(0, 10) + ' 至 ' + moment(item.endDate).subtract(10, 'seconds').format('YYYY-MM-DD');
            }
        }
    })
</script>
</body>
</html>
